<script setup lang="ts">
import { onMounted, reactive, onBeforeMount } from "vue";
import { getHomeSwiper, getResourceBrief, getHomeTotal } from "@/tools/api";
let data = reactive({
  swiperHeight: "",
  swiperList: [] as any[],
  proProfile: "",
  totalForm: {} as any,
  isVisible: false,
  tableData: [{}],
});

// onBeforeMount(() => {
//   Promise.all([
//     getHomeSwiper(),
//     getResourceBrief({ htmlStatus: 1 }),
//     getHomeTotal()
//   ]).then(res => {
//     res.forEach((item, idx) => {

//       switch (idx) {
//         case 0:
//           data.swiperList = item.list.obj;
//           break;
//         case 1:
//           data.proProfile = item.proProfile;
//           break;
//         case 2:
//           data.totalForm = item;
//           break;
//         case 3:
//           break;
//         default:
//           break;
//       }
//     });
//   });
// });
const showVisible = () => {
  data.isVisible = true;
};
onMounted(() => {});
const swiperLoaded = (payload: Event) => {};
</script>
<template>
  <!-- 区域一 -->
  <div class="slideBox">
    <el-carousel
      class="swiper"
      trigger="click"
      :height="'500px'"
      arrow="always"
    >
      <el-carousel-item class="item">
        <!-- <img :src="item.picpath" @load="swiperLoaded" /> -->
        <img src="@/assets/images/3.jpg" />
        <!-- <div>{{ item }}</div> -->
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 资源库简介 -->
  <div class="container1">
    <div class="layout1">
      <ul class="noticeBox">
        <li class="noticedata">
          <h3>最新实验线索</h3>
          <div class="justify-between">
            <p>知母皂苷BⅡ胶囊在健康受试者中单...</p>
            <span>2024-10-10 </span>
          </div>
          <div class="justify-between">
            <p>知母皂苷BⅡ胶囊在健康受试者中单...</p>
            <span>2024-10-10 </span>
          </div>
          <div></div>
          <div class="lookMore">
            查看更多 <el-icon> <ArrowRight /></el-icon>
          </div>
        </li>
        <li class="noticedata" style="margin: 0 16px">
          <h3>最新招募线索</h3>
          <div>
            <p>知母皂苷BⅡ胶囊在健康受试者中单...</p>
            <span>2024-10-10 </span>
          </div>
          <div></div>
          <div class="lookMore">
            查看更多 <el-icon> <ArrowRight /></el-icon>
          </div>
        </li>
        <li class="noticedata">
          <h3>最新通知公告</h3>
          <div>
            <p>知母皂苷BⅡ胶囊在健康受试者中单...</p>
            <span>2024-10-10 </span>
          </div>
          <div></div>
          <div class="lookMore">
            查看更多 <el-icon> <ArrowRight /></el-icon>
          </div>
        </li>
      </ul>
    </div>
    <!-- 区域三 -->
    <div class="layout2">
      <div class="layout1_lt justify-between">
        <div>
          <img src="@/assets/images/2.png" alt="" />
          <p>优势适应症</p>
        </div>
        <div class="lookMore" @click="showVisible">
          查看更多 <el-icon> <ArrowRight /></el-icon>
        </div>
      </div>
      <div class="layout2_c">
        <ul class="layout2_cr">
          <li>
            <p>实体瘤</p>
            <div>
              <span v-for="(i, n) in 8" :key="n">{{ i }}</span>
            </div>
          </li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="layout2">
      <div class="layout1_lt justify-between">
        <div>
          <img src="@/assets/images/2.png" alt="" />
          <p>优秀研究者</p>
        </div>
        <div class="lookMore">
          查看更多 <el-icon> <ArrowRight /></el-icon>
        </div>
      </div>

      <ul class="layout3_cr">
        <li class="critem" v-for="i in 6" :key="i">
          <div class="userInfo">
            <img src="" alt="" />
            <div>
              <p>赵艳秋</p>
              <div>主任医师</div>
              <span>河南省肿瘤医院</span>
            </div>
            <strong>在研项目：555</strong>
          </div>
          <div class="yslist">
            <img src="@/assets/images/ys.png" alt="" />
            <ul>
              <li v-for="(i, n) in 8" :key="n">{{ i }}</li>
            </ul>
          </div>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="layout3">
      <div class="layout1_lt justify-between">
        <div>
          <img src="@/assets/images/4.png" alt="" />
          <p>优秀研究中心</p>
        </div>
        <div class="lookMore">
          查看更多 <el-icon> <ArrowRight /></el-icon>
        </div>
      </div>

      <ul class="layout4_cr">
        <li v-for="i in 4" class="layout4_content">
          <img src="" alt="" />
          <p>实体瘤</p>
          <span>河南省郑州市</span>
          <ul>
            <li>三甲</li>
            <li>一期</li>

            <li>药物</li>
            <li>机械</li>
          </ul>
        </li>
      </ul>
    </div>
    <el-dialog v-model="data.isVisible" title="全局优势适应症" width="900">
      <div class="tableBox">
        <el-table
          class="testTable"
          :data="data.tableData"
          align="left"
          border
          header-row-class-name="headerName"
          style="width: 100%"
        >
        <el-table-column prop="date" label="适应症" width="300" />

          <el-table-column prop="date" label="医院" >
            <template #default="scope">
             试验分类:药代动力学/药效动力学试验
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.slideBox {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 500px;

  .swiper {
    font-size: 40px;
    height: 500px;

    .item {
      img {
        width: 100%;
        object-fit: cover;
        height: 500px;
      }
    }
  }
}

.noticeBox {
  display: flex;
  justify-content: space-between;
  margin-top: -40px;
  position: relative;
}

.noticedata {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(69, 69, 69, 0.1);
  border-radius: 6px;
  padding: 25px 20px;
  flex: 1;
  h3 {
    font-size: 20px;
    color: #0c9397;
    margin-bottom: 20px;
  }
  div {
    display: flex;
    align-items: center;
    margin-top: 16px;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      font-size: 16px;
      color: #666666;
      white-space: nowrap;
    }
    span {
      color: #999;
      margin-left: 33px;
    }
  }

  // width: 416px;
}
.lookMore {
  margin: 0;
  justify-content: flex-end;
  align-items: center;
  line-height: 1;
  color: #999999;
  font-size: 16px;
  cursor: pointer;
}
.layout1_lt {
  margin: 35px 0 20px;
  display: flex;
  img {
    width: 26px;
    height: 26px;
    margin-right: 10px;
    flex-shrink: 0;
  }
  p {
    font-size: 20px;
    color: #333333;
  }
  div {
    display: flex;
    align-items: center;
  }
}
.layout3_cr {
  display: flex;
  flex-wrap: wrap;
  margin-right: -25px;
  .critem {
    background: #ffffff;
    border-radius: 3px;
    border: 1px solid #ebebeb;
    padding: 20px 15px;
    // width: 30%;
    flex-shrink: 0;
    margin: 0 25px 25px 0;
    width: 410px;
    height: 240px;
    background: #ffffff;
    border-radius: 3px;
    border: 1px solid #ebebeb;
    .userInfo {
      display: flex;
      font-size: 15px;
      position: relative;
      flex: 1;
      img {
        width: 68px;
        height: 68px;
        margin-right: 15px;
        border-radius: 50%;
      }
      p {
        font-size: 20px;
        color: #111111;
        line-height: 36px;
        margin-bottom: 20px;
      }
      div {
        color: #333333;
        margin-bottom: 10px;
      }
      span {
        color: #999999;
      }
      strong {
        font-weight: bold;
        font-size: 16px;
        color: #0c9397;
        position: absolute;
        right: 0;
        top: 10px;
      }
    }
    .yslist {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid #ebebeb;
      display: flex;
      ul {
        flex: 1;
        flex-wrap: wrap;
        display: flex;
        li {
          font-size: 14px;
          color: #666666;
          background: #f5f5f5;
          border-radius: 3px;
          padding: 6px 10px;

          margin-left: 5px;
        }
      }
    }
  }
}
.layout4_cr {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .layout4_content {
    width: 303px;
    height: 259px;
    background: #ffffff;
    border-radius: 3px;
    text-align: center;
    border: 1px solid #ebebeb;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    img {
      width: 96px;
      height: 96px;
      border-radius: 50%;
    }
    p {
      font-size: 18px;
      color: #333;
      margin: 18px 0;
    }
    span {
      font-size: 16px;
      color: #888;
    }
    ul {
      display: flex;
      justify-content: center;
      margin-top: 18px;
      li {
        padding: 5px 8px;
        border-radius: 3px;
        color: #fff;
        margin-right: 5px;
        font-size: 16px;
        background: #0c9397;
      }
    }
  }
}
.tableBox{
  margin: 10px 0;
  border-top: 1px solid #ebebeb;
  padding-top: 30px;
}
</style>